<template>
    <div style="width: 100%">
        <a-row :gutter="24">
            <template v-for="item of showFileList">
                <a-col :span="span" :key="item.fileName" v-if="item.status !== 'delete'">
                    <div :class="['model-item', border ? 'margin-b-8' : 'hide-border']">
                        <flexbox>
                            <PaperClipOutlined />
                            <flexbox-item>
                                <flexbox>
                                    <div class="model-item-title">{{ getFileName(item.fileName) }}</div>
                                    <div :style="{ width: `${(getFileType(item.fileName).length + 1) * 15}px` }">{{ `.${getFileType(item.fileName)}` }}</div>
                                </flexbox>
                            </flexbox-item>
                            <ZoomInOutlined @click="previewFile(item, !!detail?.pmpTestInformationDTO)" class="margin-l-8" />
                            <DownloadOutlined @click="downFile(item, !!detail?.pmpTestInformationDTO)" class="margin-l-8" />
                        </flexbox>
                    </div>
                </a-col>
            </template>
        </a-row>
        <a class="more-text" v-if="showFileList.length !== fileList.length" @click="setShowMore">
            <my-icon type="iconzhankai" />
            <span class="text">展开更多</span>
        </a>
    </div>
</template>

<script lang="ts">
import { PaperClipOutlined, DownloadOutlined, ZoomInOutlined } from '@ant-design/icons-vue';
import { FileItem } from '@/types';
import { getFileName, getFileType } from '@/utils/file/file';
import { useDownFile } from '@/hooks/common/useFile';
import { defineComponent, PropType, computed, ref } from 'vue';
export default defineComponent({
    props: {
        fileList: {
            type: Array as PropType<FileItem[]>,
            default: () => []
        },
        span: {
            type: Number,
            default: 12
        },
        max: {
            type: Number,
            default: 0
        },
        border: {
            type: Boolean,
            default: true
        },
        detail: {
            type: Object,
            default: () => ({})
        }
    },
    components: {
        PaperClipOutlined,
        DownloadOutlined,
        ZoomInOutlined
    },
    setup(props) {
        const { downFile, previewFile } = useDownFile();
        const showMore = ref(false);
        const showFileList = computed(() => {
            const { fileList, max } = props;
            if (max) {
                if (fileList.length >= max) {
                    return showMore.value ? fileList : fileList.slice(0, max);
                } else {
                    return fileList;
                }
            } else {
                return fileList;
            }
        });
        const setShowMore = () => {
            showMore.value = true;
        };
        return {
            showMore,
            showFileList,
            getFileName,
            getFileType,
            setShowMore,
            downFile,
            previewFile
        };
    }
});
</script>

<style scoped lang="less">
.model-item {
    margin: 0;
    padding: 0px 12px;
    font-variant: tabular-nums;
    list-style: none;
    font-feature-settings: 'tnum';
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 4px 11px;
    // color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
    line-height: 1.5715;
    background-color: #fff;
    background-image: none;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    transition: all 0.3s;
    &-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .action {
        color: #505a6e;
    }
}
.hide-border {
    border: none;
}
.more-text {
    padding: 5px 10px;
    font-size: 12px;
    span.text {
        margin-left: 8px;
    }
}
</style>
